<template>
  <div class="m16">
    <a-card class="container m16">
      <a-tabs
        v-model:activeKey="activeKey"
        type="editable-card"
        @tabClick="handleClickTopCategory"
        @edit="onEdit"
      >
        <a-tab-pane v-for="item in categoryList" :key="item.categoryId" :tab="item.name">
          <a-tag
            v-for="iitem in childrenCategoryList"
            closable
            @close.prevent="handleDeleteChildrenCategory(iitem)"
            @contextmenu="handleContext($event, iitem)"
          >
            {{ iitem.name }}
          </a-tag>
          <a-tag @click="handleOpenAddChildrenCategory">
            <PlusOutlined></PlusOutlined>
          </a-tag>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <CategoryModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { delCategoryApi, getCategoryListApi } from "/@/api/microresource/novelCategory";
import { NovelCategoryVOModel } from "/@/api/microresource/model/novelCategoryModel";
import { useMessage } from "/@/hooks/web/useMessage";
import CategoryModal from "./modal.vue";
import { useModal } from "/@/components/Modal";
import { useContextMenu } from "/@/hooks/web/useContextMenu";

const { createMessage, createConfirm } = useMessage();
const [createContextMenu] = useContextMenu();

const activeKey = ref("");
const activeCategory = ref<NovelCategoryVOModel>({});
const categoryList = ref<NovelCategoryVOModel[]>();
const childrenCategoryList = ref<NovelCategoryVOModel[]>();

const getTopCategoryList = async () => {
  const result = await getCategoryListApi({});
  categoryList.value = result.data;
  if (categoryList.value!.length > 0) {
    if (!activeKey.value) {
      activeKey.value = categoryList.value![0].categoryId || "";
      activeCategory.value = categoryList.value![0] || {};
    }
    getChildrenCategoryList();
  }
};

const getChildrenCategoryList = async () => {
  const result = await getCategoryListApi({ parentId: activeKey.value });
  childrenCategoryList.value = result.data;
};

getTopCategoryList();

function handleContext(e: MouseEvent, val: NovelCategoryVOModel) {
  createContextMenu({
    event: e,
    items: [
      {
        label: "编辑",
        icon: "bi:plus",
        handler: () => {
          openModal(true, {
            isUpdate: true,
            parentId: activeKey.value,
            record: val,
          });
        },
      },
    ],
  });
}

const handleSuccess = () => {
  getTopCategoryList();
};

const [registerModal, { openModal: openModal }] = useModal();

const handleClickTopCategory = (val: string) => {
  if (val != activeKey.value) {
    activeKey.value = val;
    getChildrenCategoryList();
  }
};

const onEdit = (targetKey: string, action: string) => {
  if (action === "add") {
    openModal(true, {
      isUpdate: false,
    });
  } else {
    createConfirm({
      iconType: "warning",
      title: "确认提示",
      content: "请确认是否删除分类？",
      onOk: () => {
        delCategoryApi([targetKey])
          .then((res) => {
            if (targetKey == activeKey.value) {
              activeKey.value = "";
              activeCategory.value = {};
            }
            getTopCategoryList();
            createMessage.success(res.msg);
          })
          .finally(() => {});
      },
    });
  }
};

const handleOpenAddChildrenCategory = () => {
  openModal(true, {
    isUpdate: false,
    parentId: activeKey.value,
  });
};

const handleDeleteChildrenCategory = (val: NovelCategoryVOModel) => {
  createConfirm({
    iconType: "warning",
    title: "确认提示",
    content: "请确认是否删除分类？",
    onOk: () => {
      delCategoryApi([val.categoryId!])
        .then((res) => {
          getChildrenCategoryList();
          createMessage.success(res.msg);
        })
        .finally(() => {});
    },
  });
};
</script>

<style lang="less" scoped>
.m16 {
  margin: 16px;
}

.container {
  min-height: 500px;
}

.mb20 {
  margin-bottom: 20px;
}

.center {
  text-align: center;
}
</style>
